<template>
	<view class="modify-page">
		<c-layout>
			<c-navigation-bar slot="head" :title="$t('storeManagement.myWarehouse')">
			</c-navigation-bar>
			<view class="tabs">
				<view class="tabs_aside" :class="active===0?'active':''" @click="handleOnShelf">

					{{$t('storeManagement.shelf')}}
				</view>
				<view class="tabs_aside" :class="active===1?'active':''" @click="handLowerleShelf">

					{{$t('storeManagement.NotShelf')}}
				</view>
			</view>
			<!-- 上架 -->
			<scroll-view scroll-y style="height: 78vh; width: 100% " @scrolltolower="onreachBottom1" v-if="active===0">
				<view class="productBox" v-for="(item,index) in shelfList" :key="item.id">
					<view class="productBox_top">
						<u-image :src='$u.file.getMedieUrl(item.image)' style='height: 160rpx;width: 160rpx;'></u-image>
						<view class="goods-info" style="margin-left: 12rpx;">
							<uni-tooltip :content="item.goodsName">
								<view class="goodsName">
									{{item.goodsName}}
								</view>
							</uni-tooltip>
							<view class="goodsDesc" style="color: #91909A;font-size: 24Frpx; margin: 12rpx 0 18rpx 0;">
								{{item.goodsDesc}}
							</view>
							<!-- <view class="" style="color: #91909A;font-size: 24rpx; ">
								Specifications：{{item.specifications}}
							</view> -->
						</view>
					</view>
					<view class="productBox_bottom">
						<view class="statistics">
							<view class="">
								{{$t('storeManagement.TotalQuantity')}} <text style='color:#000;margin-left: 10rpx;'>{{item.num}}</text>
							</view>
							<view class="statistics_two">
								{{$t('storeManagement.TotalAmount')}} <text
									style='color:#000;margin-left: 10rpx;'>${{Number(item.totalPrice).toFixed(2)}}</text>
							</view>
						</view>
						<view class="" style="display: flex;justify-content: end;width: 100%;">
							<!-- <view class="replenishenmentBtn">
								Replenishment
							</view> -->

							<view class="lowerShelfBtn" @click="seeDetail(item)">
								{{$t('storeManagement.replenishment')}}
							</view>
							<view class="lowerShelfBtn" @click="handleLower(item.id)">
								{{$t('storeManagement.LowerShelf')}}
							</view>

						</view>

					</view>
					<view class="" v-if="item.num<10" style="color: #f00;">
						{{$t('storeManagement.StockShortageTips')}}
					</view>
				</view>
				<uni-load-more :status="status" color="#777777"></uni-load-more>

			</scroll-view>
			<!-- 未上架 -->
			<scroll-view scroll-y style="height: 78vh; width: 100%" @scrolltolower="onreachBottom2" v-if="active===1">
				<view class="productBox" v-for="(item,index) in notShelfList" :key="item.id">
					<view class="productBox_top">
						<u-image :src='$u.file.getMedieUrl(item.image)' style='height: 160rpx;width: 160rpx;'></u-image>
						<view class="goods-info" style="margin-left: 12rpx;">
							<uni-tooltip :content="item.goodsName">
								<view class="goodsName">
									{{item.goodsName}}
								</view>
							</uni-tooltip>
							<view class="goodsDesc" style="color: #91909A;font-size: 24Frpx; margin: 12rpx 0 18rpx 0;">
								{{item.goodsDesc}}
							</view>
							<!-- <view class="" style="color: #91909A;font-size: 24rpx; ">
								Specifications：{{item.specifications}}
							</view> -->
						</view>
					</view>
					<view class="productBox_bottom">
						<view class="statistics">
							<view class="">
								{{$t('storeManagement.TotalQuantity')}} <text style='color:#000;margin-left: 10rpx;'>{{item.num}}</text>
							</view>
							<view class="statistics_two">
								{{$t('storeManagement.TotalAmount')}} <text
									style='color:#000;margin-left: 10rpx;'>${{Number(item.totalPrice).toFixed(2)}}</text>
							</view>
						</view>
						<view class="" style="display: flex;justify-content: end;width: 100%;">
							<view class="replenishenmentBtn " @click="change1(item.id,index)">
								{{$t('storeManagement.HitTheShelf')}}
							</view>
							<view class="lowerShelfBtn" @click="item.num>0?openReturnPop(item.id):deleteOrder(item.id)">
								{{$t('storeManagement.return')}}
							</view>
						</view>
					</view>
				</view>
				<uni-load-more :status="status"></uni-load-more>
			</scroll-view>

		</c-layout>
		<!-- 头部 -->
		<view>
			<u-toast ref="uToast" />
		</view>
		<!-- 商品规格详情 -->
		<u-popup v-model="show" mode="bottom" height="932rpx" showClose border-radius="60">
			<view class="popop-box">
				<view class="productBox-img">
					<u-image :lazy-load="true" :src="$u.file.getMedieUrl(showList.h2ProductGoodsinfo.image)"
						style="height: 160rpx; width: 160rpx"></u-image>
					<view class="">
						<view class="middle-box">
							<view class="productBox-price">${{ showList.h2ProductGoodsinfo.priceMax }}</view>
							<view class="discount" v-if="showPrice">{{$t('product.takeHomePrice')}}${{ showPrice }}</view>
						</view>
					<view class="" style="color: #A8A8A8; font-size: 12px;margin:20rpx 40rpx" v-if="showPrice">
						{{$t('product.MOQ')}}:{{minNum}}{{$t('home.item')}} {{$t('product.residualInventory')}} {{num_t}}
					
					</view>
					
					</view>
					
				</view>
				<view class="select-box">
					<view class="select-size" v-for="(skuItem, index) in skuAttributes" :key="skuItem.id">
						<view class="select1">{{ skuItem.name }}</view>
						<view class="box">
							<view class="type"
								:class="[skuItem.active2 === skuType.id ? 'active' : '', skuType.optional ? 'optional' : '']"
								v-for="skuType in skuItem.options" :key="skuType.id"
								@click="skuType.optional ? selectAtribulte(skuType, index) : ''">
								{{ skuType.name }}
								<view class="oss" v-if="!skuType.optional">oos</view>
							</view>
						</view>

					</view>

				</view>
				<u-button type="primary" class="confir-btn" @click="goparDetail()">{{$t('orderDetails.Purchases')}}</u-button>
			</view>
		</u-popup>

		<!-- 退回理由选择 -->
		<u-popup v-model="show_return" mode="bottom" height="932rpx" showClose border-radius="60">
			<view class="returnTitile">
				{{$t('storeManagement.returnResource')}}
			</view>
			<view class="returnbox">
				<u-radio-group v-model="value" wrap>
					<u-radio v-for="(item, index) in list" :key="index" :name="item.value">
						{{item.name}}
					</u-radio>
				</u-radio-group>
				<u-field label-width="220px" v-model="reasonDesc" :label="$t('storeManagement.reasonDesc')" label-position="top" type="textarea" />
			</view>
			<view class="returnBottom">
				<u-button type="primary" class="confir-btn" @click="change2()">{{$t('storeManagement.return')}}</u-button>
			</view>

		</u-popup>
		<!-- 确认删除 -->
		<u-modal v-model="deleteShow" :show-title='false' @confirm="confirm" :confirm-text="$t('system.affirm')"
			:cancel-text="$t('system.cancel')" show-cancel-button :content="$t('storeManagement.returnNum') " ref="uModal"
			:async-close="true"></u-modal>
	</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPrice: '',
				num_t: '',
				group: {},
				goodsSku: '',
				show: false, //详情
				contentText: "",
				current: 1,
				minNum: uni.getStorageSync('purchaseMinNum'),
				status: null, // 加载状态
				//详情
				showList: {
					price: 198,
					image: '',
					h2ProductGoodsinfo: [],
					options: [{
							selectName: 'selectColor',
							type: ['#D9CCCE', '#4D4A5D', '#222222', '#CCCCCC']
						},
						{
							selectName: 'selectSize',
							type: ['Ssss', 'Mmmm', 'Lfdd', 'XL', 'XXL']
						}
					]
				},
				//搜索
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
					navType: 'navBackTitle',
				},

				activeIndex: null,
				active2: 0,
				active: 0,
				shelfList: [

				],
				skuAttributes: [],
				skuAttr: [],
				notShelfList: [

				],
				// 退回理由
				show_return: false,
				return_id: '',
				list: [{
						name: this.$t('storeManagement.returnResource_1'),
						value: 1
					},
					{
						name: this.$t('storeManagement.returnResource_2'),
						value: 2
					},
					{
						name: this.$t('storeManagement.returnResource_3'),
						value: 3
					},
					{
						name: this.$t('storeManagement.returnResource_4'),
						value: 4
					},
					{
						name: this.$t('storeManagement.returnResource_5'),
						value: 5
					},
					{
						name: this.$t('storeManagement.returnResource_6'),
						value: 6
					},
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: this.$t('storeManagement.returnResource_1'),
				reasonDesc: '',


				// 删除订单弹窗
				deleteShow: false,
				orderId: '',
			}
		},
		onLoad() {
			this.getDictType()
		},

		methods: {
			getDictType(){				
				this.$u.get(`/system/dict/data/type/return_reason`).then((r) => {
					let liss=r.data
					this.list=liss.map(item=>{
					return {
						name: item.dictLabel,
						value: item.dictValue
					}	
					})
				});
				
			},
			// //查看是否有库存
			selectAtribulte(op, index) {
				if (this.skuAttributes[index].active2 === op.id) {
					this.skuAttributes[index].active2 = '';
					delete this.group[op.attrId];
					delete this.showList.h2ProductGoodsinfo['selectDetail'];
				} else {
					this.group[op.attrId] = Number(op.id);
					this.skuAttributes[index].active2 = op.id;

					this.showList.h2ProductGoodsinfo['selectDetail'] +=
						`${this.skuAttributes[index].name}:${op.name},`;
				}


				if (Object.keys(this.group).length === this.skuAttributes.length) {
					this.specificationList = []
					let newArr = []
					newArr = this.skuAttr.filter(item => {
						return Object.entries(JSON.parse(item.skuAttribute))
							.toString() === (Object.entries(this.group).toString())
					})

					console.log(this.skuAttr.filter(item => {
						return Object.entries(JSON.parse(item
							.skuAttribute)).toString() === (Object.entries(this.group).toString())
					}))
					if (newArr.length) {
						console.log(newArr)
						let item = newArr[0]
						newArr[0].count = 1
						this.count = 1
						this.specificationList = [...this.specificationList, ...[newArr[0]]]
						this.showPrice = item.price;
						this.num_t = item.num;
						this.goodsSku = item.id;
						this.changedSpecification = newArr[0]
						this.showList.h2ProductGoodsinfo['selPrice'] = this.showPrice;
						this.showList.h2ProductGoodsinfo['goodsSku'] = this.goodsSku;
					} else {
						this.specificationList = []
						this.showPrice = '';
						this.count = 1
						this.showToast('out of store');
						this.changedSpecification = {}
						this.skuAttributes[index].active2 = '';
						this.goodsSku = '';
					}
				}

			},

			goGoodsDetail() {
				this.show = !this.show
			},
			//点击图片查看详情
			seeDetail(item) {
				this.show = !this.show;
				this.goodsSku = '';
				this.group = {};
				this.showPrice = '';
				this.$u.get(`/app/h2-shop-goodsinfo/prdouct/${item.goodsId}`).then((r) => {
					this.showList = r.data;
					this.showList.h2ProductGoodsinfo['selectDetail'] = '';
					this.skuAttributes = r.data.h2ProductSkuAttributeList.map((e) => ({
						...e,
						active2: ''
					}));
					this.skuAttr = r.data.h2ProductSkuList;
					this.group = {};
					this.skuAttr.forEach((i) => {
						if (i.num > this.minNum) {
							console.log(JSON.parse(i.skuAttribute));
							let obj = JSON.parse(i.skuAttribute);
							for (var o in obj) {

								this.skuAttributes.forEach((k) => {
									k.options.forEach((j) => {
										if ((j.attrId == o) & (j.id == obj[o])) {
											j.optional = true;
										}
									});
								});
								console.log('键名：', o);
								console.log('键值：', obj[o]);
							}
						}

					});
				});
			},
			// 前往订单支付
			goparDetail() {
				this.specificationList.forEach(i => {
					i.count = uni.getStorageSync('purchaseMinNum')
				})
				this.$set(this.showList.h2ProductGoodsinfo, 'specificationList', this.specificationList);
				if (this.specificationList.length > 0) {

					uni.navigateTo({
						url: `/pages/storyType/storeManagement/purchaseDetail?item=${encodeURIComponent(JSON.stringify(this.showList.h2ProductGoodsinfo))}`,
						animationType: 'slide-in-right',
						animationDuration: 300
					});

				} else {
					this.showToast(this.$t('product.selectSpecifications'));
				}
			},
			//底部加载更多  已上架
			onreachBottom1() {
				this.status = "loading"
				this.getOnLists()
			},
			//底部加载更多 未上架
			onreachBottom2() {
				this.status = "loading"
				this.getLowerLists()
			},

			handLowerleShelf() {
				this.notShelfList = []
				this.current = 1
				this.active = 1
				this.getLowerLists()
			},
			handleOnShelf() {
				this.shelfList = []
				this.current = 1
				this.active = 0
				this.getOnLists()
			},
			//初始化
			refresh() {
				this.current = 1
				this.shelfList = []
				this.notShelfList = []
			},
			//下架
			handleLower(id) {
				this.$u.get(`/app/shopGoodsInfo/${id}`).then(r => {
					this.showToast(r.msg)
					this.refresh()
					this.getOnLists()
				})
			},
			//上架
			change1(id, index) {


				this.$u.get(`/app/shopGoodsInfo/${id}`).then(r => {
					this.showToast(r.msg)
					this.refresh()
					this.getLowerLists()
				})
			},

			//退货
			openReturnPop(id) {
				this.return_id = id
				this.show_return = true
				this.value = 1
				this.reasonDesc = ''
			},
			// 删除订单
			deleteOrder(id) {
				this.orderId = id
				this.deleteShow = true
			},

			confirm() {

				this.$u.post(`/app/shopGoodsInfo/deleteShopGoodsInfo/${this.orderId}`).then((r) => {
					if (r.code == 200) {
						this.$u.toast(this.$t('product.deleteSuccess'));
						this.deleteShow = false
						this.refresh()
						this.getLowerLists()
					}
				}).catch(err => {
					console.log(err)
					this.deleteShow = false
				})

			},

			change2() {
				this.$u.post(`/app/shopReturnPurchase/applyFor`, {
					shopGoodsId: this.return_id,
					returnReason: this.value,
					reasonDesc: this.reasonDesc,
				}).then(r => {
					if (r.code == 499) {
						uni.showToast({
							title: this.$t('storeManagement.returnError'),
							icon: 'none'
						});
					} else {
						this.showToast(r.msg)
						this.show_return = false
						this.refresh()
						this.getLowerLists()
					}

				})

			},
			//查詢商品 status为true 已上架   false未上架
			getOnLists() {
				let data = {
					current: this.current,
					size: 10,
					status: true
				}
				this.$u.post(`/app/shopGoodsInfo/page`, data).then((r) => {
					if (r.code == 200) {
						const nextDataList = r.data.records; // 假设接口返回数据格式为 { data: [...] }
						if (nextDataList.length > 0) {
							this.shelfList = this.shelfList.concat(nextDataList);
							this.current++;
						} else {
							this.status = "noMore"
						}
					} else {
						uni.showToast({
							title: 'err',
							icon: 'none'
						});
					}
				});
			},
			//查询未上架
			getLowerLists() {
				let data = {
					current: this.current,
					size: 10,
					status: false
				}
				this.$u.post(`/app/shopGoodsInfo/page`, data).then((r) => {

					if (r.code == 200) {
						const nextDataList = r.data.records; // 假设接口返回数据格式为 { data: [...] }
						if (nextDataList.length > 0) {
							this.notShelfList = this.notShelfList.concat(nextDataList);
							this.current++;
						} else {
							this.status = "noMore"
						}
					} else {
						this.showToast("err");
					}
				});
			},
			showToast(tittle) {
				this.$refs.uToast.show({
					title: tittle,
					type: 'default',

				})
			}
		},

		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.getOnLists()



		}
	}
</script>

<style lang="scss" scoped>
	/deep/.uni-scroll-view,
	.uni-scroll-view-content {
		height: 98%;
		overflow: auto;

	}

	.uni-scroll-view {
		margin-bottom: 100rpx;
	}

	.modify-page {
		height: 100vh;
		padding: 0 44rpx;

		.tabs {

			height: 68rpx;
			background: rgba(0, 0, 0, 0.0287);
			border-radius: 34rpx 34rpx 34rpx 34rpx;
			opacity: 1;
			width: 539rpx;
			display: flex;
			align-items: center;
			margin: 58rpx auto;
			padding: 0 8rpx;

			.tabs_aside {
				width: 50%;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular-Regular, PingFangSC-Regular;
				font-weight: 400;
				color: #A5A5A5;
				transition: transform .4s;

			}

			.active {
				background: #FFFFFF;
				box-shadow: 0rpx 10rpx 40rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				height: 56rpx;
				line-height: 56rpx;
				color: #3B2BE4;
			}
		}

		.productBox {
			background: #FFFFFF;
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			opacity: 1;
			border: 2rpx solid #E1E8E8;
			margin-bottom: 30rpx;
			padding: 20rpx;

			.productBox_top {
				display: flex;
				padding-bottom: 10px;
				border-bottom: 1px solid #F2F3F5;
				align-items: center;
			}

			.productBox_bottom {
				margin: 8px 0;
				display: flex;
				flex-wrap: wrap;
				/* flex: 1; */
				height: 53px;
				align-content: space-between;

				.statistics {
					display: flex;
					font-size: 20rpx;
					font-family: SFUIDisplay-Regular-Regular, SFUIDisplay-Regular;
					font-weight: 400;
					color: #91909A;

					.statistics_two {
						margin-left: 58rpx;
					}
				}
			}
		}

		.replenishenmentBtn {
			height: 52rpx;
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			opacity: 1;
			border: 2rpx solid #2934D0;
			line-height: 52rpx;
			color: #2934D0;
			width: 230rpx;
			text-align: center;

			&:active {
				background-color: #2934D0;
				color: #FFFFFF;
			}
		}

		.lowerShelfBtn {
			height: 52rpx;
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			opacity: 1;
			border: 2rpx solid #2934D0;
			line-height: 52rpx;
			// background: #2934D0;
			color: #2934D0;
			width: 230rpx;
			text-align: center;
			margin: 0 16rpx;

			&:active {
				background-color: #2934D0;
				color: #FFFFFF;
			}
		}



	}

	.active2 {
		background: #2934D0;
		color: #fff !important;
	}

	.goods-info {
		width: 50%;
		flex: 1;
	}

	.goodsName {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.goodsDesc {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden; //溢出内容隐藏
		text-overflow: ellipsis; //文本溢出部分用省略号表示
		display: -webkit-box; //特别显示模式
		-webkit-line-clamp: 2; //行数
		line-clamp: 2;
		-webkit-box-orient: vertical; //盒子中内容竖直排列

	}

	.popop-box {
		height: 932rpx;

		.productBox-img {
			position: fixed;
			// left: 50%;
			// top: 0;
			// right: 50%;
			// transform: translate(-50%, 0rpx);
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			opacity: 1;
			// border: 1px solid #f2f3f5;
			margin: 40rpx;
			padding: 20rpx;
			display: flex;

			.middle-box {
				padding-left: 40rpx;
				display: flex;
				align-items: baseline;

				.productBox-price {
					font-size: 40rpx;
					color: #000000;
					font-weight: 500;
				}

				.discount {
					font-size: 28rpx;
					color: rgba(252, 61, 92, 1);
					font-weight: 500;
					margin-left: 10rpx;
				}

			}

		}


		.select-box {
			padding: 0rpx 40rpx 40rpx 40rpx;
			position: absolute;
			top: 280rpx;
			bottom: 80rpx;
			overflow: auto;

			.titleBox {
				display: flex;
				margin: 48rpx 0;
				justify-content: space-between;
				align-items: center;

				.title {
					font-size: 30rpx;
					color: #000000;
				}

				.btn {
					width: 44rpx;
					height: 44rpx;
					line-height: 40rpx;
					text-align: center;
					border-radius: 50%;
					border: 1px solid #000;
				}
			}

			.select-size {
				.select1 {
					font-size: 32rpx;
					font-weight: 400;
					color: #000000;
				}


				.box {
					display: flex;
					flex-wrap: wrap;

					.type {
						padding: 20rpx 20rpx;

						margin: 20rpx 20rpx 20rpx 0;

						border-radius: 8rpx;
						font-size: 24rpx;
						position: relative;
						height: 64rpx;
						background: rgba(242, 242, 242, 1);
						color: rgb(182, 182, 182);

						.oss {
							position: absolute;
							top: -12px;
							right: -6px;
							background: rgba(182, 182, 182, 1);
							width: 64rpx;
							text-align: center;
							font-size: 18rpx;
							color: #fff;
							height: 20px;
							line-height: 20px;
							border-radius: 10rpx;
						}
					}

					.optional {
						color: rgb(27, 29, 41);
						background: rgba(242, 242, 242, 1);
					}

					.active {
						color: #fff;
						background: #2934d0;
					}
				}

			}
		}

		.confir-btn {
			width: 380rpx;
			height: 100rpx;
			background: #2934d0;
			border-radius: 20rpx;
			display: flex;
			position: fixed;
			left: 50%;
			bottom: 20rpx;
			right: 50%;
			transform: translate(-50%, 0rpx);
		}
	}

	.returnTitile {
		font-size: 30rpx;
		margin: 40rpx;
		text-align: center;
	}

	.returnbox {
		margin: 40rpx;
	}

	.returnBottom {
		position: fixed;
		bottom: 40rpx;
		left: 40rpx;
		right: 40rpx;
	}

	/deep/ .u-radio {
		margin: 8rpx 0;
	}

	/deep/ .fild-body {
		border: 1px solid;
		margin-top: 20rpx;
		width: 100%;
	}
	/deep/ .u-field {
   padding: 20rpx 0;
  
}
</style>